<template>
  <div class="motherboard-info">
    <el-card v-loading="loading">
      <div class="tab-header">
        <span>主板信息</span>
        <el-icon class="refresh-icon" @click="refresh">
          <Refresh />
        </el-icon>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="制造商">
          {{ info?.manufacturer }}
        </el-descriptions-item>
        <el-descriptions-item label="型号">
          {{ info?.model }}
        </el-descriptions-item>
        <el-descriptions-item label="序列号">
          {{ info?.serial }}
        </el-descriptions-item>
        <el-descriptions-item label="版本">
          {{ info?.version }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ info?.status }}
        </el-descriptions-item>
        <el-descriptions-item label="标签">
          {{ info?.tag }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { getMotherboardInfo } from '/@/api/monitor'

const info = ref({} as any)
const loading = ref(false)

const refresh = async () => {
  try {
    loading.value = true
    const { data } = await getMotherboardInfo()
    info.value = data.motherboard
  } finally {
    loading.value = false
  }
}

defineExpose({
  refresh
})
</script>

<style lang="scss" scoped>
@import '../styles/common.scss';
</style> 